<template>
  <view class="section-container">
    <view class="section" @click="changeShow">
      <view class="section-title">
        <view class="title-item-top">
          <image class="section-top-img" mode="widthFix" src="@/static/images/bazi/rect.png" />
          <view>易朴 / yipu</view>
          <view class="title-line"></view>
        </view>
        <view class="title-item-bottom">
          <image class="section-title-img" mode="widthFix" src="@/static/images/bazi/d.png" />
          <view class="section-title-text">{{title}}</view>
          <view v-if="isOpen" class="arrow">
            <image class="section-arrow" mode="widthFix" src="@/static/images/bazi/top.png" />
            <!-- <uni-icons type="top" size="20" color="#2C2C2C"></uni-icons> -->
          </view>
          <view v-if="!isOpen" class="arrow">
            <image class="section-arrow" mode="widthFix" src="@/static/images/bazi/bottom.png" />
            <!-- <uni-icons type="bottom" size="20" color="#2C2C2C"></uni-icons> -->
          </view>
        </view>
      </view>
    </view>
    <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles" :show="isOpen">
      <slot></slot>
    </uni-transition>
  </view>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: ""
      },
      show: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      show() {
        this.isOpen = this.show;
      }
    },
    data() {
      return {
        isOpen: this.show,
        baziResult: this.result,
        modeClass: 'fade',
        styles: {}
      }
    },
    methods: {
      changeShow() {
        this.isOpen = !this.isOpen;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .section-container {
    width: 100%;
    box-sizing: border-box;
  }
  .section {
    width: 100%;
    box-sizing: border-box;
    height: 106rpx;
    color: white;
    background: rgba(216, 216, 216, 0.35);
    display: flex;
    flex-direction: row;
    align-items: center;
    // padding: 10rpx 46rpx;

    .section-title {
      display: flex;
      flex-direction: column;
      color: #2C2C2C;
      width: 100%;
    }
    
    .title-item-top {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 14rpx;
      line-height: 14rpx;
      padding: 0 33rpx 0 60rpx;
    }
    
    .title-item-bottom {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 12rpx 33rpx 0 24rpx;
    }
    
    .section-top-img {
      width: 12rpx;
      margin-right: 10rpx;
    }
    
    .title-line {
      display: flex;
      flex-grow: 1;
      height: 4rpx;
      border-bottom: 2rpx solid #2C2C2C;
      margin-left: 10rpx;
      align-self: flex-end;
    }
    
    .section-title-img {
      width: 44rpx;
      margin-right: 10rpx;
    }
    
    .section-title-text {
      font-size: 30rpx;
      line-height: 30rpx;
    }

    .arrow {
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .section-arrow {
      width: 28rpx;
      height: 28rpx;
      margin-left: 14rpx;
    }
  }
</style>